<!-- 银行卡组件页 -->
<template>
  <view class="goods-container">
    <view class="header">
      <nut-input class="left" v-model="keywords" clearable :border="false" placeholder="请输入开户行名称"
        @update:model-value="changeInput">
      </nut-input>
      <view class="cancel" v-if="!keywords.trim()" @click="goback">取消</view>
      <view class="cancel" v-else @click="chooseBankName(keywords)">确定</view>
      <view class="select-list" v-if="selectList.length">
        <view class="select-item" v-for="(item, index) in selectList" :key="index" v-html="item.str"
          @click="chooseBankName(item.bankName)"></view>
      </view>
    </view>
    <view class="elevators">
      <nut-elevator :index-list="elevatorList" @click-item.native="clickItem"
        height="calc(100vh - 240rpx)"></nut-elevator>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";
import { getBankList } from "@/@api/wait"; // 待确认页面接口

import { pinyin } from "pinyin-pro";
const keywords = ref<string>('')
const list = ref<any>([])
const elevatorList = ref<object[]>([])
const selectList = ref<any>([])


useDidShow(() => {
  initList(); // 初始化开户行列表
});

// 前端查询
const changeInput = () => {
  if (!keywords.value) {
    selectList.value = []
    return
  }
  selectList.value = list.value.filter((item) => {
    return item.bankName.indexOf(keywords.value) !== -1
  }).map((item) => {
    return {
      ...item,
      str: item.bankName.replace(keywords.value, `<text style="color:#0966ff">${keywords.value}</text>`)
    }
  })

}

// 选择开户行
const chooseBankName = (item) => {
  console.log(item, '选中开户行名称-常寄')
  let pages = Taro.getCurrentPages()
  let prevPage = pages[pages.length - 2]
  prevPage.setData({ bankName: item })
  Taro.navigateBack()
}

// 点击选中开户行名称
const clickItem = (key: number, item: any) => {
  console.log(item.bankName, '选中开户行名称')
  let pages = Taro.getCurrentPages()
  let prevPage = pages[pages.length - 2]
  prevPage.setData({ bankName: item.bankName })
  Taro.navigateBack()
}



// 开户行列表
async function initList() {
  const res = await getBankList();
  if (res.data.code == 200) {
    console.log(res.data, '开户行列表数据')
    list.value = res.data.rows;
    elevatorList.value = transformList(res.data.rows)
  }
}


const transformList = (list: any) => {
  let arr: any = []
  let obj = {}
  for (let i = 0; i < list.length; i++) {
    let firstLetter = (pinyin(list[i].bankName, { pattern: 'first', toneType: 'none', type: 'array' })[0]).toUpperCase()
    if (!obj[firstLetter]) {
      obj[firstLetter] = [{ ...list[i], name: list[i].bankName, id: list[i].btabId }]
    }
    else {
      obj[firstLetter].push({ ...list[i], name: list[i].bankName, id: list[i].btabId })
    }
  }
  for (let key in obj) {
    arr.push({
      title: key,
      list: obj[key]
    })
  }
  arr.sort((a, b) => {
    return a.title.charCodeAt() - b.title.charCodeAt()
  })
  return arr
}

const goback = () => {
  Taro.navigateBack()
}

</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
  --nut-tabs-horizontal-tab-line-color: #0966ff;
  --nut-tabs-horizontal-titles-item-min-width: 240rpx;
  --nut-elevator-list-item-bars-inner-item-active-color: #0966ff;

  .nut-elevator__list .nut-elevator__list__fixed__wrapper {
    display: none;
  }

  overflow: hidden;
}

.goods-container {
  .nut-tabs__titles {
    padding: 0;
  }

  width: 100%;
  box-sizing: border-box;
  padding: 24rpx;

  .header {
    width: 100%;
    align-items: center;
    display: flex;
    height: 88rpx;
    position: relative;

    .nut-input {
      padding: 20rpx;
      height: 88rpx;
      box-sizing: border-box;
      border-radius: 8rpx 0 0 8rpx;
    }

    .left {
      height: 100%;
    }

    .cancel {
      width: 112rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background-color: #0966ff;
      font-size: 28rpx;
      border-radius: 0 8rpx 8rpx 0;
    }

    .select-list {
      z-index: 30;
      width: 100%;
      position: absolute;
      top: 104rpx;
      left: 0;
      border-radius: 16rpx;
      overflow: hidden;
      background-color: #fff;

      .select-item {
        width: 100%;
        height: 80rpx;
        box-sizing: border-box;
        padding: 0 24rpx;
        line-height: 80rpx;
        font-size: 24rpx;
        color: #252525;
        border-bottom: 1rpx splid #f5f5f5;

        &:last-child {
          border: none;
        }
      }
    }
  }

  .tabs {
    background-color: #f5f5f5;

    .nut-tabs__titles .nut-tabs__list {
      width: auto;

      &.nut-tabs__titles-item {
        width: auto !important;
      }
    }

    .nut-tab-pane {
      background-color: #f5f5f5;
      padding: 0;
    }

    .historys {
      width: calc(100% + 24rpx);
      display: flex;
      flex-wrap: wrap;

      .history-item {
        padding: 0 24rpx;
        font-size: 24rpx;
        line-height: 56rpx;
        border-radius: 28rpx;
        margin-right: 24rpx;
        margin-top: 24rpx;
        background-color: #fff;
        color: #252525;
      }
    }

    .elevators {
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding-bottom: 24rpx;
    }
  }
}
</style>
